<template>
  <el-dialog v-el-drag-dialog :title="title" fullscreen :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>开始任务</span>
        <el-button class="fr" icon="el-icon-printer" circle @click="print"></el-button>
      </div>
      <el-col :span="18" :offset="3">
        <div class="form-conf" v-if="hasLoaded" print-only>
          <parser :form-conf="formData" ref="parser" @getData="getData" />
        </div>
      </el-col>
      <el-col :span="18" :offset="7" class="m-b-10">
        <el-transfer
          v-if="nextUser.length > 0"
          v-model="assignee"
          :props="transferProps"
          :data="nextUser"
          :titles="['候选人','审批人']">
        </el-transfer>
      </el-col>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { processFormData, nextFlowNode, startTask } from '@/api/tool/workflow'
import Parser from '@/components/Parser'

export default {
  name: "TaskStartDialog",
  components: {
    Parser
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      appendToBody: false,
      definitionId: undefined,
      deploymentId: undefined,
      hasLoaded: false,
      formData: {},
      variables: {},
      transferProps: {
        key: 'userId',
        label: 'userName'
      },
      assignee: undefined,
      nextUser: []
    }
  },
  methods: {
    init(deploymentId, definitionId) {
      this.visible = true
      this.$nextTick(() => {
        this.loadFlowForm(deploymentId, definitionId)
        this.loadCandidate({ 'deployId': deploymentId })
      })
    },
    loadFlowForm(deploymentId, definitionId) {
      processFormData({ 'definitionId': definitionId, 'deployId': deploymentId }).then(response => {
        if (response.param) {
          this.formData = this.$api.objectExtend(this.formData, response.param)
          this.definitionId = definitionId
          this.deployId = deploymentId
          this.hasLoaded = true
        }
      }).catch(() => {})
    },
    loadCandidate(query) {
      nextFlowNode(query).then(response => {
        this.nextUser = response.param.userList || []
      })
    },
    getData(data) {
      this.variables = {}
      if (data) {
        const variableData = {}
        data.fields.forEach(item => {
          // 表单值为多个选项时
          if (item.__config__.defaultValue instanceof Array) {
            const array = []
            item.__config__.defaultValue.forEach(val => {
              array.push(val)
            })
            variableData[item.__vModel__] = array
          } else {
            variableData[item.__vModel__] = item.__config__.defaultValue
          }
        })
        this.variables = variableData
      }
    },
    handleSubmit() {
      this.$refs.parser.getData()
      if (Object.keys(this.variables).length !== 0 && this.definitionId) {
        if (this.assignee) {
          this.variables.assignee = this.assignee
        }
        const that = this
        // 启动流程并将表单数据加入流程变量
        startTask(this.definitionId, this.variables).then(response => {
          that.$modal.msgSuccess(response.msg)
          that.$emit('confirm')
          that.onClose()
        })
      }
    },
    print() {
      this.$htmlToPaper('printArea')
    },
    onClose() {
      this.hasLoaded = false
      this.definitionId = undefined
      this.deployId = undefined
      this.formData = {}
      this.variables = []
      this.assignee = undefined
      this.nextUser = []
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.form-conf {
  margin: 15px auto;
  width: 80%;
  padding: 15px;
}
</style>
